<template>
	<view>
		<view style="margin-bottom: 180rpx;background-color: #fff;z-index: 999;">
			<u-navbar
				leftIconSize="35"
				:placeholder="false"
				bgColor="rgba(255,255,255,0)"
				@leftClick="leftClick"
				fixed
				title="年审"
				leftIcon="arrow-down"
				:leftText="user.username"
				leftIconColor="#26387C"
			></u-navbar>
		</view>

		<view
			class="center"
			v-for="(item, index) in dataList"
			:key="index"
			@click="goCenter(item.name, item.id)"
		>
			<!-- left -->
			<view class="left">
				<text class=" pf-sc fw-500" style="font-size: 28rpx;color:#26387C;">

				</text>
				<!-- 头像 -->
				<view class="avatar">
					<image :src="'https://www.chejingjing.cn' + item.avatar"></image>
				</view>
				<!-- 姓名 -->
				<view class="user">
					<!-- 年审 -->
					<view class="userName">
						<view>{{ item.name }}</view>
						<view>年审</view>
					</view>
					<!-- 电话 -->
					<view>{{ item.mobile }}</view>
				</view>
			</view>
			<!-- right -->
			<view v-if="item.typestatus == 0" style="color: #26387C;">待审核</view>
			<view v-if="item.typestatus == 1" style="color: #23B779;">已通过</view>
			<view v-if="item.typestatus == 2" style="color: #ED1D15;">已驳回</view>
		</view>
		<u-popup
			:show="show"
			mode="bottom"
			overlayOpacity="0.6"
			:round="25"
			@close="close"
			@open="open"
		>
			<view style="width: 750rpx;height: 200rpx;" class="loginOut" @click="loginOut">退出登录</view>
		</u-popup>
	</view>
</template>

<script>
import QQMapWX from '@/common/qqmap-wx-jssdk';
import amap from '@/common/amap-wx.js';
import { loginout, nianlist, updateuserloaction } from '@/common/api.js';
export default {
	data() {
		return {
			type: '',
			user: uni.getStorageSync('AnnuallyUser'),
			show: false,
			dataList: [],
			page: 1,
			long: '',
			lat: '',
			amapPlugin: null,
			selecAdress: '',
			key: '25d8a43c8ee55f7c0e6dfb815fdff544',
		};
	},
	methods: {
		getLocation() {
			uni.getLocation({
				geocode: true,
				isHighAccuracy: true,
				altitude: true,
				success: res => {
					console.log(res);
				}
			});
		},
		getList() {
			let params = {
				token: this.user.token,
				page: this.page
			};
			nianlist(params).then(res => {
				console.log(res.data.data.length);
				if (this.page == 1) {
					this.dataList = res.data.data;
				}
				if (this.page != 1) {
					this.dataList.push(...res.data.data);
				}
				if (res.data.data.length == 0) {
					uni.showToast({
						title: '没有更多内容了',
						icon: 'none'
					});
				}
			});
		},
		goCenter(name, id) {
			uni.navigateTo({
				url: `/pages/AnnuallyDetails/AnnuallyDetails?name=${name}&id=${id}`
			});

			this.show = false;
		},
		close() {
			this.show = false;
		},
		open() {
			this.show = true;
		},
		leftClick() {
			this.show = true;
		},
		loginOut() {
			uni.showModal({
				title: '提示',
				content: '您确定要退出吗？',
				success: res => {
					if (res.confirm) {
						this.show = false;
						loginout({ token: this.user.token }).then(res => {
							if (res.data.code == 1) {
								uni.removeStorageSync('AnnuallyUser');
								uni.showToast({
									title: '退出成功'
								});

								setTimeout(() => {
									if (this.type == 'index') {
										uni.navigateTo({
											url: '/pages/index/index'
										});
									} else if (this.type == 'user') {
										uni.switchTab({
											url: '/pages/UserCenter/UserCenter'
										});
									}
								}, 500);
							} else {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
							}
						});
					} else if (res.cancel) {
						this.show = false;
					}
				}
			});
		},
		//获取地理位置
		getMap(index) {
			var that = this;
			var qqmapsdk;
			this.amapPlugin.getRegeo({
				success: data => {
					console.log(data, '经纬度');
					uni.hideLoading();
					that.long = data[0].longitude;
					that.lat = data[0].latitude;

					qqmapsdk = new QQMapWX({
						key: '662BZ-2EAR6-M34S7-M4NPO-HFV3F-QEBTV' //自己申请的key
					});
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: that.lat,
							longitude: that.long
						},
						success: addressRes => {
						that.selecAdress = addressRes.result.address_reference.landmark_l2.title;
							this.updateLocation();
						},
						fail(res) {}
					});
				}
			});
		},
		updateLocation() {
			let id = uni.getStorageSync('AnnuallyUser').id;
			console.log('车管所', id);
			updateuserloaction({ id, lon: this.long, lat: this.lat }).then(res => {
				console.log(res, '更新位置');
			});
		},
		onLoad(options) {
			this.type = options.type;
			this.getList();

			this.amapPlugin = new amap.AMapWX({
				key: this.key
			});
			this.getMap();
			this.updateLocation()
		},
		onShow() {
			this.getMap()
			this.updateLocation()
		},
		onReachBottom() {
			let page = this.page++;
			this.getList();
		}
	}
};
</script>

<style lang="scss">
.center {
	width: 710rpx;
	height: 150rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.left {
		display: flex;
		align-items: center;
		.user {
			margin-left: 30rpx;
			.userName {
				display: flex;
				align-items: center;
				& > view:nth-child(1) {
					font-size: 30rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: bold;
					color: #333333;
					margin-right: 24rpx;
				}
				& > view:nth-child(2) {
					width: 68rpx;
					height: 30rpx;
					line-height: 30rpx;
					text-align: center;
					background-color: #ffefe6;

					color: red !important;
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}
			}
			& > view:nth-child(2) {
				margin-top: 10rpx;
			}
		}
		.avatar > image {
			width: 92rpx;
			height: 92rpx;
			border-radius: 50%;
			vertical-align: middle;
		}
	}
}
.loginOut {
	font-size: 32rpx;
	line-height: 200rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ed5050;
	text-align: center;
}
.u-navbar__content {
	background-color: #fff !important;
	z-index: 99 !important;
}
.u-status-bar {
	background-color: #fff !important;
	z-index: 99 !important;
}
</style>
